<template>
  <div class="lookbox">
    <!-- 导航栏 -->
    <van-nav-bar title="去挂号" left-arrow @click-left="onClickLeft" />
    <!-- 提示信息 -->
    <p class="my1">号源服务由挂号网在线提供</p>
    <!-- 搜索框 -->
    <div style="position: relative">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @click="onClickButton" shape="round">
        <template #action>
          <div class="search">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 分类 -->
    <div class="my2_2">
      <dl>
        <dt><img src="https://kano.guahao.com/RO7505058185" alt="" /></dt>
        <dd>精神心理</dd>
      </dl>
      <dl>
        <dt><img src="https://kano.guahao.com/iS4505062926" alt="" /></dt>
        <dd>冬季官方</dd>
      </dl>
      <dl>
        <dt><img src="https://kano.guahao.com/cP4505068139" alt="" /></dt>
        <dd>名医挂号</dd>
      </dl>
      <dl @click="router.push('/index/AI')">
        <dt><img src="https://kano.guahao.com/gEv505065748" alt="" /></dt>
        <dd>导诊台</dd>
      </dl>
    </div>
    <!-- 下拉菜单 -->
    <div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @change="screen1" />
        <van-dropdown-item v-model="value2" :options="option2" @change="screen2" />
      </van-dropdown-menu>
    </div>

    <!-- 列表、 -->
    <div class="box">
      <dl v-for="(item, index) in List" :key="index">
        <dt><img v-lazy="item.image" alt=""></dt>
        <dd>
          <h3>{{ item.title }}</h3>
          <p><span class="level">{{ item.level }}</span><span class="type">{{ item.type }}</span></p>
          <p>重点科室：{{ item.department }}</p>
          <span>距离我:{{ item.distance }}KM</span>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import axios from '../../utils/request'
const onClickLeft = () => history.back();
const router = useRouter()
const searchValue = ref<string>('') // 搜索框的值
const defaultContents = ref<string[]>(['专家问诊', '健康VIP', '一病多问']) // 默认内容数组
let currentIndex = ref<number>(0) // 当前索引
let intervalId: ReturnType<typeof setInterval> // 定时器的 ID

// 切换默认内容的函数
const switchContent = () => {
  currentIndex.value = (currentIndex.value + 1) % defaultContents.value.length
  searchValue.value = defaultContents.value[currentIndex.value]
}

// 组件挂载时设置定时器
onMounted(() => {
  searchValue.value = defaultContents.value[currentIndex.value] // 设置初始值
  intervalId = setInterval(switchContent, 1500) // 每 1.5秒切换一次
})

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  clearInterval(intervalId)
})
// 跳转搜索
const onClickButton = () => {
  router.push('/search')
}


const value1 = ref(0);
const value2 = ref(2);
const option1 = [
  { text: '综合排序', value: 0 },
  { text: '离我最近', value: 1 },
];
const option2 = [
  { text: '筛选', value: 2 },
  { text: '综合医院', value: 3 },
  { text: '三级甲等', value: 4 },
];

// 数据
const List = ref<any>([])
const getList = async () => {
  const res = await axios.get('/api/v1/register')
  console.log(res.data.data)
  List.value = res.data.data
}
getList()

// 筛选1
const screen1 = () => {
  if (value1.value == 0) {
    getList()
  } else if (value1.value == 1) {
    List.value = List.value.sort((a: any, b: any) => a.distance - b.distance)
  }
}


// 筛选2
const screen2 = () => {
  if (value2.value == 2) {
    getList()
  } else if (value2.value == 3) {
    List.value = List.value.filter((item: any) => item.type == '综合医院')
  } else if (value2.value == 4) {
    List.value = List.value.filter((item: any) => item.level == '三级甲等')
  }
}




</script>

<style lang="scss" scoped>
.lookbox {
  width: 100%;
  height: 100vh;
  font-size: 14px;
}

.my1 {
  font-size: .4rem;
  text-align: center;
  background: rgb(245, 229, 124);
  color: #6e6501;
  height: 1rem;
  line-height: 1rem
}

.my2_2 {
  width: 100%;
  height: 100px;
  display: flex;

  dl {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    dt,
    dd {
      img {
        width: 30px;
        height: 30px;
      }

      font-size: 15px;
    }
  }
}

.box {
  width: 100%;
  height: 100%;
  dl {
    width: 90%;
    margin: 0 auto;
    display: flex;
    margin-top: 25px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 45px;
    line-height: 25px;
    dt {
      img {
        width: 90px;
        height: 100px;
      }
    }

    dd {
      margin-left: 15px;
      font-size: 13px;

      .level {
        color: red;
        margin-right: 10px;
      }
    }
  }
}
</style>
